<template>
  <div class="cao">
 <!-- 工具栏和搜索栏 -->
 <el-form ref="searchForm">
      <el-form-item>
        <el-col :span="3">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="openAddDialog"
        >新增课程
        </el-button
        >
      </el-col>
      <el-col :span="3">
       <!--  输入框有input事件和change事件,但input在输入框内容发生改变时自动回调,而change必须是输入完后输入框失去焦点才会触发  -->
       <el-input size="small" clearable v-model="courseName" placeholder="输入课程名称"
                      @input="inputChange"
            ></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="success" size="medium" @click="search" icon="el-icon-search">查询</el-button>
          </el-col>
          <el-col :span="1">
          <el-button type="info" plain size="medium " @click="resetSearchForm" icon="el-icon-refresh">重置
          </el-button>
        </el-col>
      </el-form-item>
    </el-form>

    <!-- 数据展示栏 -->
    <el-table v-loading="loading" :data="courseList" id="table_excel">
      <el-table-column label="课程号" align="center" prop="id" width="200px"/>
      <el-table-column label="课程名称" align="center" prop="cname" width="200px"/>
      <el-table-column label="授课教师" align="center" prop="tname" width="200px"/>
      <el-table-column label="教师容量" align="center" prop="volume" width="150px"></el-table-column>
      <el-table-column label="当前选课人数" align="center" prop="num" width="120px"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning" plain
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="danger" plain
            icon="el-icon-circle-close"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="danger" plain
            icon="el-icon-circle-close"
            @click="handleManage(scope.row)"
          >管理当前课程
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

     <!--添加的对话框-->
     <el-dialog :title="title1" :visible.sync="addDialog" width="30%" center :show-close="false">
      <el-form :model="courses" :rules="rules" ref="addForm">
        <el-form-item label="课程名称" prop="cname" label-width="100px">
              <el-input
                v-model="courses.cname"
                autocomplete="off"
                style="width: 200px"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="授课教师" prop="tname" label-width="100px">
              <el-input
                v-model="courses.tname"
                autocomplete="off"
                style="width: 200px"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="教室容量" prop="volume" label-width="100px">
              <el-input
                v-model="courses.volume"
                autocomplete="off"
                style="width: 200px"
                placeholder="请输入容量"
              ></el-input>
            </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddCourse('addForm')">取 消</el-button>
        <el-button type="primary" @click="addCourses('addForm')"
        >提交
        </el-button
        >
      </div>
    </el-dialog>

      <!--修改的对话框-->
      <el-dialog :title="title2" :visible.sync="editDialog" width="30%" center :show-close="false">
      <el-form :model="courses" :rules="rule2" ref="editForm">
        <el-form-item label="课程id"  label-width="100px">
              {{ courses.id }}
            </el-form-item>
        <el-form-item label="课程名称" prop="cname" label-width="100px">
              <el-input
                v-model="courses.cname"
                autocomplete="off"
                style="width: 200px"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="授课教师" prop="tname" label-width="100px">
              <el-input
                v-model="courses.tname"
                autocomplete="off"
                style="width: 200px"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="教室容量" label-width="100px">
              {{ courses.volume }}
            </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditCourse('editForm')">取 消</el-button>
        <el-button type="primary" @click="editCourses('editForm')"
        >保存
        </el-button
        >
      </div>
    </el-dialog>


          <!--学生选课数据对话框-->
          <el-dialog  :visible.sync="studentDialog" width="60%" center :show-close="true" @closed="closed">
      <el-form>
        <h2>管理课程号为{{ courses.id }}的课程的选课情况</h2>
        <h3>当前{{ courses.num }}人,容量{{ courses.volume }}人</h3>
          <!-- 数据展示栏 -->
    <el-table v-loading="loading" :data="infos" id="table_excel">
      <el-table-column label="学号" align="center" prop="id" width="200px"/>
      <el-table-column label="学生姓名" align="center" prop="sname" width="200px"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger" plain
            icon="el-icon-circle-close"
            @click="studentDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-form>
     <!-- 分页 -->
     <el-pagination
      background
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
      :current-page="currentPage2"
      :page-sizes="[5, 10, 20]"
      :page-size2="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import {getInfo,addCourse,editCourse,delICourse,students,deletestudent} from '@/api/course'


export default {
  name: 'course',
  data() {
    return {
      // 遮罩层
      loading: true,
      currentPage: 1, // 当前页面
      total: 0, // 总条数
      pageNum: 1, // 当前页面
      pageSize: 5, // 每页大小
      currentPage2: 1, // 当前页面
      pageNum2: 1, // 当前页面
      pageSize2: 5, // 每页大小
      total2: 0, // 总条数
      courseList: [], //课程记录
      courseName:'',
      addDialog: false, //新增对话框
      editDialog:false,
      studentDialog:false,
      title1:'新增课程',
      title2:'编辑课程',
      cid:'',
      courses:{
        id:'',
        cname:'',
        tname:'',
        volume:'',
        num:''
      },
      infos:{
        id:'',
        sname:''
      },
      rules: {
        cname: [
          { required: true, message: '课程明不能为空', trigger: 'blur' }
        ],
        tname: [
          { required: true, message: '授课教师不能为空', trigger: 'blur' }
        ],
        volume: [
          { required: true, message: '容量不能为空', trigger: 'blur' }
        ]
      },
      rule2: {
        cname: [
          { required: true, message: '课程明不能为空', trigger: 'blur' }
        ],
        tname: [
          { required: true, message: '授课教师不能为空', trigger: 'blur' }
        ],
      }

    }
  },
  methods: {
     /** 查询单位列表 */
     fetchData() {
      //组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        cname : this.courseName
      }
      getInfo(params).then(res => {
        if (res.code == 20000) {
          this.loading = false
          this.courseList = res.data.list
          this.pageNum = res.data.pageNum
          this.total = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
      })
    },
      /** 查询单位列表 */
      fetchData2() {
        //组装查询参数
        let params = {
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        cid : this.cid
      }
      students(params).then(res => {
        if (res.code == 20000) {
          this.infos = res.data.list
          this.pageNum2 = res.data.pageNum
          this.total2 = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
      })
    },
      // 监听课程名称输入框变化
      inputChange() {
      // 监听变化直接查库刷新
      this.loading = true
      this.fetchData()
    },
      // 重置表单
      resetSearchForm() {
      this.courseName = ''
      this.loading = true
      this.fetchData()
    },
    handleSizeChange(val) {
      // 处理页面大小改变时触发
      this.loading = true
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      // 当前页码改变时触发
      this.loading = true
      this.pageNum = val
      this.fetchData()
    },
    handleSizeChange2(val) {
      // 处理页面大小改变时触发
      this.pageSize2 = val
      this.fetchData2()
    },
    handleCurrentChange2(val) {
      // 当前页码改变时触发
      this.pageNum2 = val
      this.fetchData2()
    },
    //打开新增挂号对话框
    openAddDialog() {
      this.addDialog = true
    },
    search(){
      this.fetchData();
    },
      //增加对话框点击取消
      cancelAddCourse(formName) {
      this.$refs[formName].resetFields()
      this.courses = {}
      this.loading = true
      this.fetchData()
      this.addDialog = false
    },

    //增加对话框点击保存
    addCourses(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          addCourse(this.courses).then((res) => {
              if (res.code == 20000) {
                this.$message({
                  type: 'success',
                  message: '新增成功',
                  duration: 1000
                })
                this.fetchData()
                this.addDialog = false
                this.courses = {}
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                  duration: 1000
                })
              }
            })
        } else {
          return false
        }
      })
    },
        //点击修改课程信息
        handleEdit(row) {
      this.courses = row
      this.editDialog = true
    },

      //修改对话框点击取消
      cancelEditCourse(formName) {
      this.$refs[formName].resetFields()
      this.courses = {}
      this.loading = true
      this.fetchData()
      this.editDialog = false
    },
     //修改对话框点击保存
     editCourses(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          editCourse(this.courses).then((res) => {
              if (res.code == 20000) {
                this.$message({
                  type: 'success',
                  message: '修改成功',
                  duration: 1000
                })
                this.fetchData()
                this.editDialog = false
                this.courses = {}
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                  duration: 1000
                })
              }
            })
        } else {
          return false
        }
      })
    },
     //删除信息
     handleDelete(row) {
      this.$confirm('确认删除名为["' + row.cname + '"]的课程吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delICourse({ cname: row.cname }).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1000
            })
            this.fetchData()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
              duration: 1000,
            })
          }
        })
      })
    },
    handleManage(row){
      this.courses = row
      this.studentDialog = true
      this.cid = this.courses.id
      this.fetchData2()

    },
    closed(){
      this.infos= {}
      this.courses = {}
      this.cid = ''
      this.loading = false
      this.fetchData()
    },
    studentDelete(row){
      this.$confirm('确认删除名为["' + row.sname + '"]的学生吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
        sid:  row.id,
        cid : this.cid
      }
        deletestudent(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1000
            })
            this.courses.num= this.courses.num-1
            this.fetchData2()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
              duration: 1000,
            })
          }
        })
      })
    }
},
created() {
    this.fetchData()
  }
}
</script>
<style scoped>
.cao {
  margin-left: 20px;
  margin-top: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
